<template>
	<view class="content">
		<view class="cont">
			<view class="box" @click="goresults(item)" v-for="item in list" :key="item.recordId">
				<view class="box-one">
					<view class="box-title">
						<text v-if="item.ms">{{item.ms}}</text>
						<text v-else>请添加隐患点名称</text>
					</view>
					<view class="box-icon">
						<image src="@/static/image/Frame 896.png" alt="正常" v-if="item.checkStatus === '0'"></image>
						<image src="@/static/image/Frame 898.png" alt="存在隐患" v-if="item.checkStatus === '1'"></image>
						<image src="@/static/image/Frame 897.png" alt="未排查" v-if="item.checkStatus === '2'"></image>
						<image src="@/static/image/Frame 885.png" alt="其他" v-if="item.checkStatus === '3'"></image>
					</view>
				</view>
				<view class="box-two">
					<view class="box-two-left">
						<u-icon name="clock-fill" color="#3597fa"></u-icon>
						<text
							style="margin: 0 10px">{{item.updateDate.substring(0,4)}}.{{item.updateDate.substring(4,6)}}.{{item.updateDate.substring(6,8)}}&nbsp;{{item.updateDate.substring(8,10)}}:{{item.updateDate.substring(10,12)}}</text>
					</view>
					<view class="box-two-right">
					</view>
				</view>

			</view>
			<u-loadmore v-show="list.length>9" :status="status" icon-type="flower" bg-color="transperant"
				margin-top="30" margin-bottom="30" />
			<!--			<view class="box">-->
			<!--				<view class="box-one">-->
			<!--					<view class="box-title">-->
			<!--						隐患点名称-->
			<!--					</view>-->
			<!--					<view class="box-icon">-->
			<!--						<img src="../../../static/image/Frame 885.png" alt="">-->
			<!--					</view>-->
			<!--				</view>-->
			<!--				<view class="box-two">-->
			<!--					<view class="box-two-left">-->
			<!--						<img src="../../../static/image/Frame 881.png" alt="">未按时巡检-->
			<!--					</view>-->
			<!--					<view class="box-two-right">-->

			<!--					</view>-->
			<!--				</view>-->
			<!--			</view>-->
		</view>
	</view>
</template>

<script>
	import {
		troubleshootRecordsAPI
	} from "../../../api/api";

	export default {
		data() {
			return {
				num: 1,
				list: [],
				status: 'loadmore',
				pageSize: 10,
				pageNum: 1

			};
		},
		mounted() {
			this.getList()
			console.log(uni.getStorageSync('userId'));
		},
		methods: {
			onPullDownRefresh() {
				this.pageNum = 1
				this.list = []
				this.getList()
			},
			getList() {
				troubleshootRecordsAPI({
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					checkPerson:uni.getStorageSync('userId')
				}).then((r) => {
					if (r.data.list.length < 10) {
						this.status = "nomore"
					} else {
						this.pageNum++
						this.status = 'loadmore'
					}
					this.list = this.list.concat(r.data.list)
					uni.stopPullDownRefresh();
				})
			},
			onReachBottom() {
				//避免多次触发
				if (this.status == 'loading' || this.status == 'nomore') {
					return;
				}
				this.getList()
			},
			goresults(item) {
				uni.navigateTo({
					url: `../results/results?option=${JSON.stringify(item)}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		height: calc(100vh - 44px);
		background: #f6f6f6;
	}

	.avtive {
		background: #1989FA !important;
	}

	.color {
		color: #1989FA !important;
	}

	.tabs {
		display: flex;
		justify-content: space-around;

		.tabs-one {
			width: 311rpx;
			height: 82rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.tabs-top {
				width: 112rpx;
				height: 44rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #999;
				line-height: 44rpx;

			}

			.tabs-color {
				width: 64rpx;
				height: 6rpx;
				margin-top: 15rpx;
				background: #fff;
			}
		}
	}

	.cont {
		padding: 40rpx 24rpx;
		background-color: #f6f6f6;

		.box {
			padding: 32rpx 48rpx;
			background-color: #fff;
			border-radius: 16px 16px 16px 16px;
			margin-bottom: 20rpx;
			position: relative;

			.box-one {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid #EEEEEE;

				.box-title {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.box-icon {
					position: absolute;
					right: 0;
					top: 0;

					image {
						width: 125rpx;
						height: 125rpx;
					}
				}
			}

			.box-two {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				border-radius: 8px 8px 8px 8px;
				background: #F6F6F6;

				.box-two-left {
					display: flex;
					align-items: center;

					image {
						width: 28rpx;
						height: 28rpx;
					}

					font-size: 24rpx;
					font-family: PingFang SC-Medium,
					PingFang SC;
					font-weight: 500;
					color: #999999;
				}

				.box-two-right {

					font-size: 24rpx;
					font-family: PingFang SC-Medium,
						PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}
	}
</style>
